<template>
  <div>
    <van-nav-bar
      class="body-header"
      :style="active === 2 ? 'display:none' : ''"
      :title="title"
    />
    <div v-if="active === 0" class="body-content">
      <home-page></home-page>
    </div>
    <div v-else-if="active === 1">
      <xchange-page></xchange-page>
    </div>
    <div v-else>
      <mine-page></mine-page>
    </div>
    <van-tabbar v-model="active" class="body-footer">
      <van-tabbar-item icon="home-o">{{ titles[0] }}</van-tabbar-item>
      <van-tabbar-item icon="after-sale">{{ titles[1] }}</van-tabbar-item>
      <van-tabbar-item icon="friends-o">{{ titles[2] }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import HomePage from "./HomePage.vue";
import XchangePage from "./XchangePage.vue";
import MinePage from "./MinePage.vue";
import { mapState } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapState('page', ['indexPage'])
  },
  mounted() {
    console.log("mounted", this.indexPage);
    this.active = this.indexPage;
    this.title = this.titles[this.indexPage];
  },
  updated() {
    this.title = this.titles[this.active];
    this.$store.commit('page/change', this.active)
  },
  data() {
    return {
      title: "",
      titles: ["首页", "汇率", "我的"],
      active: 0,
    };
  },
  components: {
    HomePage,
    XchangePage,
    MinePage,
  },
};
</script>

<style lang="scss" scoped>
.body-header {
  width: 100%;
  position: fixed;
}
.body-content {
  position: relative;
  padding: 46px 0;
}
</style>